<template>
    <div>
        <span @click="changeSwitch" class="switch" v-bind:class="status=== true ? 'switch-checked ' :'' ">
            <input type="hidden" :value="status"/>
            <span class="switch-inner">
                <span>{{font}}</span>
            </span>
        </span>
    </div>
</template>

<script>
    export default{
        props:{
            cb:{}
        },
        data(){
            return{
                status:false,
            }
        },
        methods:{
            changeSwitch(){
                this.status = !this.status
                typeof(this.cb) === 'function' ? this.cb(this.status) : '';
            }
        },
        computed:{
            font:function(){
                return this.status === true ? "开启" :"关闭" ;
            }
        }
    }
</script>

<style lang="less" scoped>
    .switch {
        width: 60px;
        display: inline-block;
        height: 24px;
        line-height: 22px;
        border-radius: 24px;
        vertical-align: middle;
        border: 1px solid #ccc;
        background-color: #ccc;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        &:after{
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color: #fff;
            position: absolute;
            left: 1px;
            top: 1px;
            cursor: pointer;
            -webkit-transition: left .2s ease-in-out,width .2s ease-in-out;
            transition: left .2s ease-in-out,width .2s ease-in-out;
        }
    }
    .switch-checked {
        border-color: #2d8cf0;
        background-color: #2d8cf0;
    }
    .switch-inner {
        color: #fff;
        font-size: 12px;
        position: absolute;
        left: 25px;
    }
    .switch-checked:after{
        left: 37px;
    }
    .switch-checked .switch-inner{
        left: 8px;
    }
</style>